<template>
  <div class="test" v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="#fff">
    <!-- 世界地图 -->
    <div class="map_one">
      <h2 style="font-size:25px;">各国累计确诊人数</h2>
      <div
        id="container"
        class="chart-container_one"
        style="width: 680px; height: 300px"
        
      ></div>
    </div>
    <div class="map_two">
      <h2 style="font-size:25px;">各国现有确诊人数</h2>
      <div
        id="container_two"
        class="chart-container_two"
        style="width: 680px; height: 300px;"
      ></div>
    </div>
    <!-- 数据表格 -->
    <div class="ta_da">
      <h3  style="font-size:25px;">世界疫情数据</h3>
      <div v-if="cl_total"></div>
      <div class="data">
        <el-row :gutter="5">
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <div style="font-size:25px;">{{ cl_total[0] }}</div>
              <div style="font-size:20px;">今日确诊</div>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <div style="font-size:25px;">{{ cl_total[1] }}</div>
              <div style="font-size:20px;">今日治愈</div>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <div style="font-size:25px;">{{ cl_total[2] }}</div>
              <div style="font-size:20px;">今日死亡</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <div style="font-size:25px;">{{ cl_total[3] }}</div>
              <div style="font-size:20px;">累计确诊</div>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <div style="font-size:25px;">{{ cl_total[4] }}</div>
              <div style="font-size:20px;">累计治愈</div>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <div style="font-size:25px;">{{ cl_total[5] }}</div>
              <div style="font-size:20px;">累计死亡</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <div style="font-size:25px;">{{ cl_total[6] }}</div>
              <div style="font-size:20px;">现有确诊</div>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <div style="font-size:25px;">{{ cl_total[7] }}</div>
              <div style="font-size:20px;">治愈率</div>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <div style="font-size:25px;">{{ cl_total[8] }}</div>
              <div style="font-size:20px;">死亡率</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="table_data">
      <h3 style="font-size:25px;">各国疫情详情</h3>
      <div>
        <el-row>
          <el-col :span="4"
            ><div class="grid-content bg-purple" style="font-size:25px;font-weight:600;">国家</div>
          </el-col>
          <el-col :span="2"
            ><div class="grid-content bg-purple-light" style="font-size:25px;font-weight:600;">新增确诊</div></el-col
          >
          <el-col :span="2"
            ><div class="grid-content bg-purple-light" style="font-size:25px;font-weight:600;">现有确诊</div></el-col
          >
          <el-col :span="2"
            ><div class="grid-content bg-purple-light" style="font-size:25px;font-weight:600;">累计确诊</div></el-col
          >
          <el-col :span="2"
            ><div class="grid-content bg-purple" style="font-size:25px;font-weight:600;">新增治愈</div>
          </el-col>
          <el-col :span="2"
            ><div class="grid-content bg-purple-light" style="font-size:25px;font-weight:600;">累计治愈</div></el-col
          >
          <el-col :span="2"
            ><div class="grid-content bg-purple" style="font-size:25px;font-weight:600;">新增死亡</div>
          </el-col>
          <el-col :span="2"
            ><div class="grid-content bg-purple-light" style="font-size:25px;font-weight:600;">累计死亡</div></el-col
          >
          <el-col :span="2"
            ><div class="grid-content bg-purple-light" style="font-size:25px;font-weight:600;">治愈率</div></el-col
          >
          <el-col :span="2"
            ><div class="grid-content bg-purple-light" style="font-size:25px;font-weight:600;">死亡率</div></el-col
          >
        </el-row>

        <el-row v-for="item in cl_list" :key="item.name">
          <el-col :span="4"
            ><div class="grid-content">{{ item.name }}</div>
          </el-col>
          <el-col :span="2"
            ><div class="grid-content">{{ item.conadd }}</div></el-col
          >
          <el-col :span="2"
            ><div class="grid-content">{{ item.econNum }}</div>
          </el-col>
          <el-col :span="2"
            ><div class="grid-content">{{ item.conNum }}</div></el-col
          >
          <el-col :span="2"
            ><div class="grid-content">{{ item.cureadd }}</div>
          </el-col>
          <el-col :span="2"
            ><div class="grid-content">{{ item.cureNum }}</div></el-col
          >
          <el-col :span="2"
            ><div class="grid-content">{{ item.deathadd }}</div></el-col
          >
          <el-col :span="2"
            ><div class="grid-content">{{ item.deathNum }}</div></el-col
          >
          <el-col :span="2"
            ><div class="grid-content">{{ item.cure_con }}</div></el-col
          >
          <el-col :span="2"
            ><div class="grid-content">{{ item.dea_con }}</div></el-col
          >
        </el-row>
      </div>
    </div>
  </div>
</template>

<style scoped>
.test >>> .el-loading-spinner{
  position: absolute;
  top:3%;
}
.ta_da{
  margin-left: 125px;
}
.table_data{
  margin-left: 100px;
}
.map_two {
  width: 50%;
  height: 500px;
  display: inline-block;
}
.map_one {
  width: 50%;
  height: 500px;
  display: inline-block;
}
.chart-container_one {
  margin-top: 80px;
  margin-left: 30px;
}
.chart-container_two {
  margin-top: 70px;
  margin-left: 30px;
}
h2:first-child {
  margin-left: 50px;
}
/* 表格 */


.data {
  margin-top: 10px;
}

.data .grid-content div {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-weight: 800;
}

.el-row {
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 0;
  }
}
.dynamic >>> .el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #fbf5ef;
}
.bg-purple-light {
  background: #e5e9f2;
}
.data .grid-content {
  border-radius: 4px;
  min-height: 80px;
}
.table_data .grid-content {
  min-height: 60px;
  text-align: center;
  line-height: 60px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.grid-content{
  font-size:20px;
}
</style>

<script>
import xl_data from "../../assets/xinlang.json";
import wg_data from "../../assets/wangyi.json";
import axios from "@/http/axios";
export default {
  data() {
    return {
      total_data:xl_data.data.othertotal,
      cl_total:[],
      cl_list:[],
      res1: [],
      res2: [],
      data: xl_data.data.otherlist,
      new_obj1: [],
      new_obj2: [],
      loading: true,
      id_1:0,
      id_2:0,
    };
  },
  created() {
    this.add_data();
    this.cl_total_data();
    this.cl_list_data();
  },
  mounted() {
    setTimeout(() => {
      this.new_obj1 = this.change_data(this.res1);
      this.new_obj2 = this.change_data(this.res2);
    }, 100);
    setTimeout(() => {
      this.test();
    }, 1000);
    this.id_1 = setInterval(() => {
      this.initmap_one()
    }, 2500);
    this.id_1 = setInterval(() => {
      this.initmap_two();
    }, 3500);
    setTimeout(()=>{
      this.end_lod();
    },1500)
  },
  destroyed(){
    clearInterval(this.id_1);
    clearInterval(this.id_2);
  },
  methods: {
    // findJson() {
    //   axios.defaults.baseURL = "http://localhost:9528";
    //   axios.get("/test/news/wap/fymap2020_data.d.json").then((res) => {
    //     this.data = res.data;
    //   });
    // },
    end_lod(){
      this.loading = false;
    },
    findJson() {
      axios.defaults.baseURL = "http://localhost:9528";
      axios
        .get("/api/wuhan/app/data/list-total")
        .then((res) => {
          this.data = res.data.areaTree;
        })
        .catch((res) => {
          console.log(res);
        });
    },
    add_data(){
      this.data.map((abc) => {
        this.res1.push([abc.conNum, abc.name]);
        this.res2.push([abc.econNum, abc.name]);
      });
    },
    change_data(res) {
      // this.data.otherlist.map((abc) => {
      //   this.res1.push([abc.econNum, abc.name]);

      
      //   console.log(this.res1);
      var nameMap = {
        "Singapore Rep.": "新加坡",
        "Dominican Rep.": "多米尼加",
        Palestine: "巴勒斯坦",
        Bahamas: "巴哈马",
        "Timor-Leste": "东帝汶",
        Afghanistan: "阿富汗",
        "Guinea-Bissau": "几内亚比绍",
        "Côte d'Ivoire": "科特迪瓦",
        "Siachen Glacier": "锡亚琴冰川",
        "Br. Indian Ocean Ter.": "英属印度洋领土",
        Angola: "安哥拉",
        Albania: "阿尔巴尼亚",
        "United Arab Emirates": "阿联酋",
        Argentina: "阿根廷",
        Armenia: "亚美尼亚",
        "French Southern and Antarctic Lands": "法属南半球和南极领地",
        Australia: "澳大利亚",
        Austria: "奥地利",
        Azerbaijan: "阿塞拜疆",
        Burundi: "布隆迪",
        Belgium: "比利时",
        Benin: "贝宁",
        "Burkina Faso": "布基纳法索",
        Bangladesh: "孟加拉国",
        Bulgaria: "保加利亚",
        "The Bahamas": "巴哈马",
        "Bosnia and Herz.": "波斯尼亚和黑塞哥维那",
        Belarus: "白俄罗斯",
        Belize: "伯利兹",
        Bermuda: "百慕大",
        Bolivia: "玻利维亚",
        Brazil: "巴西",
        Brunei: "文莱",
        Bhutan: "不丹",
        Botswana: "博茨瓦纳",
        "Central African Rep.": "中非",
        Canada: "加拿大",
        Switzerland: "瑞士",
        Chile: "智利",
        China: "中国",
        "Ivory Coast": "象牙海岸",
        Cameroon: "喀麦隆",
        "Dem. Rep. Congo": "刚果民主共和国",
        Congo: "刚果",
        Colombia: "哥伦比亚",
        "Costa Rica": "哥斯达黎加",
        Cuba: "古巴",
        "N. Cyprus": "北塞浦路斯",
        Cyprus: "塞浦路斯",
        "Czech Rep.": "捷克",
        Germany: "德国",
        Djibouti: "吉布提",
        Denmark: "丹麦",
        Algeria: "阿尔及利亚",
        Ecuador: "厄瓜多尔",
        Egypt: "埃及",
        Eritrea: "厄立特里亚",
        Spain: "西班牙",
        Estonia: "爱沙尼亚",
        Ethiopia: "埃塞俄比亚",
        Finland: "芬兰",
        Fiji: "斐",
        "Falkland Islands": "福克兰群岛",
        France: "法国",
        Gabon: "加蓬",
        "United Kingdom": "英国",
        Georgia: "格鲁吉亚",
        Ghana: "加纳",
        Guinea: "几内亚",
        Gambia: "冈比亚",
        "Guinea Bissau": "几内亚比绍",
        "Eq. Guinea": "赤道几内亚",
        Greece: "希腊",
        Greenland: "格陵兰",
        Guatemala: "危地马拉",
        "French Guiana": "法属圭亚那",
        Guyana: "圭亚那",
        Honduras: "洪都拉斯",
        Croatia: "克罗地亚",
        Haiti: "海地",
        Hungary: "匈牙利",
        Indonesia: "印度尼西亚",
        India: "印度",
        Ireland: "爱尔兰",
        Iran: "伊朗",
        Iraq: "伊拉克",
        Iceland: "冰岛",
        Israel: "以色列",
        Italy: "意大利",
        Jamaica: "牙买加",
        Jordan: "约旦",
        Japan: "日本",
        Japan: "日本本土",
        Kazakhstan: "哈萨克斯坦",
        Kenya: "肯尼亚",
        Kyrgyzstan: "吉尔吉斯斯坦",
        Cambodia: "柬埔寨",
        Korea: "韩国",
        Kosovo: "科索沃",
        Kuwait: "科威特",
        "Lao PDR": "老挝",
        Lebanon: "黎巴嫩",
        Liberia: "利比里亚",
        Libya: "利比亚",
        "Sri Lanka": "斯里兰卡",
        Lesotho: "莱索托",
        Lithuania: "立陶宛",
        Luxembourg: "卢森堡",
        Latvia: "拉脱维亚",
        Morocco: "摩洛哥",
        Moldova: "摩尔多瓦",
        Madagascar: "马达加斯加",
        Mexico: "墨西哥",
        Macedonia: "马其顿",
        Mali: "马里",
        Myanmar: "缅甸",
        Montenegro: "黑山",
        Mongolia: "蒙古",
        Mozambique: "莫桑比克",
        Mauritania: "毛里塔尼亚",
        Malawi: "马拉维",
        Malaysia: "马来西亚",
        Namibia: "纳米比亚",
        "New Caledonia": "新喀里多尼亚",
        Niger: "尼日尔",
        Nigeria: "尼日利亚",
        Nicaragua: "尼加拉瓜",
        Netherlands: "荷兰",
        Norway: "挪威",
        Nepal: "尼泊尔",
        "New Zealand": "新西兰",
        Oman: "阿曼",
        Pakistan: "巴基斯坦",
        Panama: "巴拿马",
        Peru: "秘鲁",
        Philippines: "菲律宾",
        "Papua New Guinea": "巴布亚新几内亚",
        Poland: "波兰",
        "Puerto Rico": "波多黎各",
        "Dem. Rep. Korea": "朝鲜",
        Portugal: "葡萄牙",
        Paraguay: "巴拉圭",
        Qatar: "卡塔尔",
        Romania: "罗马尼亚",
        Russia: "俄罗斯",
        Rwanda: "卢旺达",
        "W. Sahara": "西撒哈拉",
        "Saudi Arabia": "沙特阿拉伯",
        Sudan: "苏丹",
        "S. Sudan": "南苏丹",
        Senegal: "塞内加尔",
        "Solomon Is.": "所罗门群岛",
        "Sierra Leone": "塞拉利昂",
        "El Salvador": "萨尔瓦多",
        Somaliland: "索马里兰",
        Somalia: "索马里",
        Serbia: "塞尔维亚",
        Suriname: "苏里南",
        Slovakia: "斯洛伐克",
        Slovenia: "斯洛文尼亚",
        Sweden: "瑞典",
        Swaziland: "斯威士兰",
        Syria: "叙利亚",
        Chad: "乍得",
        Togo: "多哥",
        Thailand: "泰国",
        Tajikistan: "塔吉克斯坦",
        Turkmenistan: "土库曼斯坦",
        "East Timor": "东帝汶",
        "Trinidad and Tobago": "特里尼达和多巴哥",
        Tunisia: "突尼斯",
        Turkey: "土耳其",
        Tanzania: "坦桑尼亚",
        Uganda: "乌干达",
        Ukraine: "乌克兰",
        Uruguay: "乌拉圭",
        "United States": "美国",
        Uzbekistan: "乌兹别克斯坦",
        Venezuela: "委内瑞拉",
        Vietnam: "越南",
        Vanuatu: "瓦努阿图",
        "West Bank": "西岸",
        Yemen: "也门",
        "South Africa": "南非",
        Zambia: "赞比亚",
        Zimbabwe: "津巴布韦",
      };
      let item1 = "";
      let item2 = [];
      let item3 = [];
      let arr1 = [];
      let arr2 = [];
      let last_data = [];
      for (item1 in nameMap) {
        arr1.push([item1, nameMap[item1]]);
      }
      for (item2 in arr1) {
        for (item3 in res) {
          if (arr1[item2][1] == res[item3][1]) {
            arr2.push([arr1[item2][0], res[item3][0]]);
          }
        }
      }
      arr2.map((it) => {
        last_data.push({ name: it[0], value: it[1] });
      });
      // console.log(this.new_obj);
      return last_data;
    },
    initmap_one() {
      echarts.init(document.getElementById("container"),
        "white",
        { renderer: "canvas" }).dispose()
      var chart_container = echarts.init(
        document.getElementById("container"),
        "white",
        { renderer: "canvas" }
      );
      var option_container = {
        // title:'世界各国累计确诊',
        visualMap: {
          min: 0,
          max: 1000000,
          left: "left",
          top: "bottom",
          text: ["高", "低"], //取值范围的文字
          inRange: {
            color: ["#e0ffff", "red"], //取值范围的颜色
          },
          show: true, //图注
        },
        series: [
          {
            type: "map",
            name: "test",
            label: {
              show: false,
              position: "top",
              margin: 8,
            },
            mapType: "world", // 地图类型为 世界地图
            // data里的每一个{}中，是一项数据整体，标明了该项数据的名称，值，以及颜色等参数。注意：此处的字符串需要加双引号""(输入法切换至英文状态)
            data: this.new_obj1,
            roam: true,
            zoom: 1,
            // 去除各个国家上的小红点
            showLegendSymbol: false,
          },
        ],

        // 鼠标悬浮，单击产生的效果（在网页上可以动态显示）
        tooltip: {
          show: true,
          trigger: "item",
          triggerOn: "mousemove|click",
          axisPointer: {
            type: "line",
          },
          textStyle: {
            fontSize: 14,
          },
          borderWidth: 0,
        },
      };
      chart_container.setOption(option_container);
    },
    initmap_two() {
      var chart_container = echarts.init(
        document.getElementById("container_two"),
        "white",
        { renderer: "canvas" }
      );
      var option_container = {
        // title:'世界各国累计确诊',
        visualMap: {
          min: 0,
          max: 1000000,
          left: "left",
          top: "bottom",
          text: ["高", "低"], //取值范围的文字
          inRange: {
            color: ["#e0ffff", "red"], //取值范围的颜色
          },
          show: true, //图注
        },
        series: [
          {
            type: "map",
            name: "test",
            label: {
              show: false,
              position: "top",
              margin: 8,
            },
            mapType: "world", // 地图类型为 世界地图
            // data里的每一个{}中，是一项数据整体，标明了该项数据的名称，值，以及颜色等参数。注意：此处的字符串需要加双引号""(输入法切换至英文状态)
            data: this.new_obj2,
            roam: true,
            zoom: 1,
            // 去除各个国家上的小红点
            showLegendSymbol: false,
          },
        ],

        // 鼠标悬浮，单击产生的效果（在网页上可以动态显示）
        tooltip: {
          show: true,
          trigger: "item",
          triggerOn: "mousemove|click",
          axisPointer: {
            type: "line",
          },
          textStyle: {
            fontSize: 14,
          },
          borderWidth: 0,
        },
      };
      chart_container.setOption(option_container);
    },
    test() {
      this.initmap_one();
      this.initmap_two();
    },
    cl_total_data(){
      this.cl_total.push(this.total_data.ecertain,this.total_data.recure_inc,this.total_data.die_inc);
      this.cl_total.push(this.total_data.certain,this.total_data.recure,this.total_data.die);
      this.cl_total.push(this.total_data.ecertain,this.total_data.recure/this.total_data.certain,this.total_data.die/this.total_data.certain);
      this.cl_total[7]=(Math.round(this.cl_total[7]*10000))/100+'%';
      this.cl_total[8]=(Math.round(this.cl_total[8]*10000))/100+'%';
    },
    cl_list_data(){
      this.data.map((item)=>{
        this.cl_list.push({name:item.name,conadd:item.conadd,econNum:item.econNum,conNum:item.conNum,cureadd:item.cureadd,cureNum:item.cureNum,deathadd:item.deathadd,deathNum:item.deathNum,cure_con:item.cureNum/item.conNum,dea_con:item.deathNum/item.conNum});
        this.cl_list.cure_con=(Math.round(this.cl_list.cure_con*10000))/100+'%';
        this.cl_list.dea_con=(Math.round(this.cl_list.dea_con*10000))/100+'%';
      })
      this.cl_list.map((it)=>{
        it.cure_con=(Math.round(it.cure_con*10000))/100+'%';
        it.dea_con=(Math.round(it.dea_con*10000))/100+'%';
        // console.log(this.cl_list.dea_con);
      })
    }
  },
};
</script>